<script setup>
import { ref, onMounted } from 'vue'
import TaskList from '../components/TaskList.vue'
import axios from '../plugins/axios'
import TaskAssignDialog from '../components/TaskAssignDialog.vue'

// 任务列表数据
const tasks = ref([])

// 搜索参数，匹配后端 TaskRequest
const searchParams = ref({
  keyword: '',
  state: '',
  startTime: '',
  endTime: '',
  responsibleUserIds: [],
  page: 1,
  rows: 5,
  sortWay: 'DESC',
  sortColumn: 'create_time' // 默认按创建时间排序
})

// 分页信息
const pagination = ref({
  total: 0
})

const dialogVisible = ref(false)
const currentTask = ref(null)
const isEdit = ref(false)
const userId = ref(localStorage.getItem('userId') ? Number(localStorage.getItem('userId')) : null)

// 获取任务列表数据
const fetchTasks = async () => {
  try {
    const response = await axios.post('/task/queryByCondition', searchParams.value)
    if (response.data.code === 1) {
      tasks.value = response.data.data
      pagination.value.total = response.data.total || 0
    } else {
      console.error('获取任务列表失败:', response.data.msg)
      tasks.value = []
      pagination.value.total = 0
    }
  } catch (error) {
    console.error('获取任务列表请求失败:', error)
    tasks.value = []
    pagination.value.total = 0
  }
}

// 处理搜索事件
const handleSearch = (formData) => {
  searchParams.value = {
    ...searchParams.value,
    ...formData,
    page: 1 // 搜索时重置页码
  }
  fetchTasks()
}

// 处理分页变化
const handlePageChange = (page) => {
  searchParams.value.page = page
  fetchTasks()
}

// 处理每页显示数量变化
const handleSizeChange = (size) => {
  searchParams.value.rows = size
  searchParams.value.page = 1
  fetchTasks()
}

// 处理新增
const handleCreate = () => {
  isEdit.value = false
  currentTask.value = null
  dialogVisible.value = true
}

// 处理编辑
const handleEdit = (task) => {
  isEdit.value = true
  currentTask.value = task
  dialogVisible.value = true
}

// 处理提交完成
const handleSubmitComplete = () => {
  fetchTasks()
}

// 组件挂载时获取数据
onMounted(() => {
  fetchTasks()
})
</script>

<template>
  <div class="task-page">
    <div class="page-header">
      <h1>任务列表</h1>
    </div>
    <TaskList 
      :tasks="tasks" 
      :userRole="'admin'" 
      @search="handleSearch"
    />
    
    <!-- Element Plus 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="searchParams.page"
        v-model:page-size="searchParams.rows"
        :page-sizes="[5, 10, 20, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 任务表单弹窗 -->
    <TaskAssignDialog
      v-model:visible="dialogVisible"
      :task-data="currentTask"
      :is-edit="isEdit"
      @submit="handleSubmitComplete"
    />
  </div>
</template>

<style scoped>
.task-page {
  padding: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.page-header {
  margin-bottom: 20px;
}

h1 {
  font-size: 1.8rem; /* 调整标题字体大小 */
  color: #303133;
  margin: 0;
}
</style>
